<!-- S search -->
<app-search-bar
  [submitLoading]="tableParams.loading"
  [searchOptions]="searchOptions"
  labelFlex="80px"
  (onSearch)="queryResetData($event)"
  (onReset)="queryResetData($event)"
>
</app-search-bar>
<!-- E search -->

<nz-card class="m-t-4">
  <div class="opera-wrap">
    <button
      nz-button
      nzType="primary"
      (click)="showAddEditModal()"
    >新增</button>
  </div>

  <div class="pagination-wrap-position p-t-15">
    <nz-table
      #basicTable
      nzSize="small"
      nzShowSizeChanger
      nzShowQuickJumper
      nzOuterBordered
      [nzScroll]="{ x: '1100px' }"
      [nzFrontPagination]="false"
      [nzLoadingDelay]="100"
      [nzLoading]="tableParams.loading"
      [nzData]="tableParams.tableData"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="tableParams.total"
      [nzPageIndex]="tableParams.page"
      [nzPageSize]="tableParams.pageSize"
      [nzShowTotal]="totalTemplate"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzPageSizeChange)="onPageSizeChange($event)"
    >
      <thead>
        <tr>
          <th nzAlign="center" nzWidth="80px">排序</th>
          <th nzAlign="center" nzWidth="120px">游戏ID</th>
          <th nzAlign="center" nzWidth="160px">游戏名称</th>
          <th nzAlign="center" nzWidth="120px">图标</th>
          <th nzAlign="center" nzWidth="120px">兑换码格式</th>
          <th nzAlign="center" nzWidth="120px">领取数量</th>
          <th nzAlign="center" nzWidth="120px">剩余数量</th>
          <th nzAlign="center" nzWidth="120px">是否启用</th>
          <th nzAlign="center" nzWidth="200px" nzRight>操作</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let data of basicTable.data; let index = index;">
          <!-- 排序 -->
          <td nzAlign="center">
            {{ tableParams.pageSize * (tableParams.page - 1) + index + 1 }}
          </td>
          <!-- 游戏ID -->
          <td nzAlign="center">{{ data.appId || '-' }}</td>
          <!-- 游戏名称 -->
          <td nzAlign="center">{{ data.appName || '-' }}</td>
          <!-- 图标 -->
          <td nzAlign="center">
            <img
              nz-image
              width="42px"
              height="42px"
              [nzSrc]="data.appIcon"
              [nzFallback]="fallback"
              alt=""
            />
          <!-- 兑换码格式 -->
          <td nzAlign="center">
            {{ data.codeType === 0 ? '统一兑换码' : data.codeType === 1 ? '随机兑换码' : '-' }}
          </td>
          <!-- 领取数量 -->
          <td nzAlign="center">{{ data.receiveQuantity || '0' }}</td>
          <!-- 剩余数量 -->
          <td nzAlign="center">
            <ng-container *ngIf="data.codeType === 0; else elseSyTemplate">
              -
            </ng-container>
            <ng-template #elseSyTemplate>
              {{ (data.codeQuantity || 0) - (data.receiveQuantity || 0) }}
            </ng-template>
          </td>
          <!-- 是否启用 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.state === 0 ? '#67C23A' : '#F56C6C'}">
              {{ data.state === 0 ? '是' : (data.state === 1 ? '否' : '-') }}
            </span>
          </td>
          <!-- 操作 -->
          <td nzAlign="center" nzRight>
            <button
              nz-button
              nzType="link"
              nzSize="small"
              [disabled]="setMoveDisabled(index, 1)"
              (click)="moveItemData(data, 1)"
            >上移</button>

            <button
              nz-button
              nzType="link"
              nzSize="small"
              [disabled]="setMoveDisabled(index, 2)"
              (click)="moveItemData(data, 0)"
            >下移</button>

            <button
              nz-button
              nzType="link"
              nzSize="small"
              (click)="showAddEditModal(data)"
            >编辑</button>

            <button
              nz-button
              nzType="link"
              nzSize="small"
              (click)="showCodeViewModal(data)"
            >查看</button>

            <button
              nz-button
              nzType="link"
              nzSize="small"
              nzDanger
              nz-popconfirm
              nzPopconfirmTitle="确认删除?"
              (nzOnConfirm)="stateChangeItem(data, 2)"
            >删除</button>

            <button
              [ngStyle]="{'color': data.state === 0 ? '#F56C6C' : '#67C23A'}"
              nz-button
              nzType="link"
              nzSize="small"
              nzDanger
              nz-popconfirm
              nzPopconfirmTitle="确认禁用?"
              (nzOnConfirm)="stateChangeItem(data, (data.state === 0 ? 1 : 0))"
            >{{ data.state === 0 ? '禁用' : '启用' }}</button>
          </td>
        </tr>
      </tbody>
    </nz-table>

    <!-- 分页template -->
    <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
  </div>
</nz-card>

<!-- S 新建编辑 -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzWidth]="520"
  [nzFooter]="null"
  [nzMaskClosable]="false"
  [(nzVisible)]="isVisible"
  [nzTitle]="modalItem ? '编辑' : '新增'"
  (nzOnCancel)="isVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <form nz-form [formGroup]="validateForm">
        <nz-form-item>
          <nz-form-label nzFlex="100px" nzRequired>游戏ID</nz-form-label>
          <nz-form-control nzFlex="auto" nzErrorTip="请选择游戏ID!">
            <nz-select
              nzShowSearch
              nzAllowClear
              nzPlaceHolder="请选择游戏ID"
              formControlName="appId">
              <nz-option
                *ngFor="let option of gameAppOptions"
                nzCustomContent
                [nzLabel]="option.id"
                [nzValue]="option.id">
                <b>{{ option.id }}</b>
                <span class="p-l-8" style="color: #909399;">{{ option.name }}</span>
              </nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label nzFlex="100px" nzRequired>兑换码格式</nz-form-label>
          <nz-form-control nzFlex="auto" nzErrorTip="请选择兑换码格式!">
            <nz-radio-group
              formControlName="codeType"
              (ngModelChange)="codeTypeChange($event)">
              <label
                *ngFor="let option of changeCodeOptions"
                nz-radio
                [nzValue]="option.value"
              >{{ option.label }}</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label nzFlex="100px" nzRequired>有效期</nz-form-label>
          <nz-form-control nzFlex="auto" nzErrorTip="请选择有效期!">
            <nz-date-picker
              style="width: 100%;"
              nzShowTime
              nzFormat="yyyy-MM-dd HH:mm:ss"
              formControlName="endTime"
            ></nz-date-picker>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label nzFlex="100px" nzRequired>兑换码详情</nz-form-label>
          <nz-form-control nzFlex="auto" nzErrorTip="请输入兑换码详情!">
            <nz-textarea-count [nzMaxCharacterCount]="120">
              <textarea
                rows="4"
                nz-input
                maxlength="120"
                placeholder="请输入兑换码详情"
                formControlName="codeDetails"
              ></textarea>
            </nz-textarea-count>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item *ngIf="[0, 1].includes(validateForm.value.codeType)">
          <nz-form-label nzFlex="100px" nzRequired>兑换码</nz-form-label>
          <ng-container *ngIf="validateForm.value.codeType === 0; else elseCodeTemplate">
            <nz-form-control nzFlex="auto" nzErrorTip="请输入兑换码">
              <!-- 统一兑换码 -->
              <input
                nz-input
                placeholder="请输入兑换码"
                formControlName="code"
              />
            </nz-form-control>
          </ng-container>

          <ng-template #elseCodeTemplate>
            <nz-form-control nzFlex="auto" nzErrorTip="请导入兑换码">
              <!-- 随机兑换码 -->
              <nz-upload
                nzAction=""
                nzAccept=".txt"
                [nzShowUploadList]="false"
                [nzCustomRequest]="uploadCodeTxtData"
              >
                <button nz-button>
                  <i nz-icon nzType="upload"></i>
                  导入
                </button>
              </nz-upload>
              <span ngDefaultControl formControlName="codes">
                <i style="color: #909399; padding-left: 10px;">已导入数量 {{ computedCodeSize() }}</i>
              </span>
            </nz-form-control>
          </ng-template>
        </nz-form-item>
      </form>
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="default" (click)="isVisible = false">取消</button>
        <button nz-button nzType="primary" [nzLoading]="submitLoading" (click)="submitForm()">确定</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 新建编辑 -->

<!-- S 查看随机兑换码 -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzWidth]="720"
  [nzFooter]="null"
  [(nzVisible)]="isCodeViewVisible"
  [nzTitle]="'查看 - 随机兑换码'"
  (nzOnCancel)="isCodeViewVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <div class="common-search-wrap">
        <div class="common-search-forms">
          <div class="common-form-item">
            <label class="common-search-label">状态</label>
            <div class="common-search-conrol">
              <nz-select
                nzShowSearch
                nzPlaceHolder="请选择状态"
                [(ngModel)]="codeTableParams.state"
                (ngModelChange)="codeStateChange()">
                <nz-option nzLabel="全部" nzValue=""></nz-option>
                <nz-option nzLabel="未领取" nzValue="0"></nz-option>
                <nz-option nzLabel="已领取" nzValue="1"></nz-option>
              </nz-select>
            </div>
          </div>
        </div>
      </div>

      <nz-divider></nz-divider>

      <div class="code-table-wrap">
        <nz-table
          #codeTable
          nzSize="small"
          nzShowSizeChanger
          nzShowQuickJumper
          nzBordered
          [nzFrontPagination]="false"
          [nzLoadingDelay]="100"
          [nzLoading]="codeTableParams.loading"
          [nzData]="codeTableParams.tableData"
          [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
          [nzTotal]="codeTableParams.total"
          [nzPageIndex]="codeTableParams.page"
          [nzPageSize]="codeTableParams.pageSize"
          [nzShowTotal]="totalTemplate"
          (nzPageIndexChange)="onCodePageIndexChange($event)"
          (nzPageSizeChange)="onCodePageSizeChange($event)"
        >
          <thead>
            <tr>
              <th nzAlign="center">兑换码</th>
              <th nzAlign="center">状态</th>
              <th nzAlign="center">操作</th>
            </tr>
          </thead>
  
          <tbody>
            <tr *ngFor="let data of codeTable.data; let index = index;">
              <!-- 兑换码 -->
              <td nzAlign="center">{{ data.code || '-' }}</td>
              <!-- 状态 -->
              <td nzAlign="center">
                <span [ngStyle]="{'color': data.state === 0 ? '#E6A23C' : '#67C23A'}">
                  {{ data.state === 0 ? '未领取' : (data.state === 1 ? '已领取' : '-') }}
                </span>
              </td>
              <!-- 操作 -->
              <td nzAlign="center">
                <ng-container *ngIf="data.state === 0; else elseDelTemplate">
                  <button
                    nz-button
                    nzType="link"
                    nzSize="small"
                    nzDanger
                    nz-popconfirm
                    nzPopconfirmTitle="确认删除?"
                    (nzOnConfirm)="deleteChangeCode(data)"
                  >删除</button>
                </ng-container>
                <ng-template #elseDelTemplate>
                  -
                </ng-template>
              </td>
            </tr>
          </tbody>
        </nz-table>
  
        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 查看随机兑换码 -->